<template>
  <div>
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限"
      :visible="isShowAssignDialog"
      @close="closeAssignDialog"
      @open="openAssignDialog"
    >
      <!-- :check-strictly="true" ：父子不关联，子选后不会影响父级 -->
      <!-- :default-expand-all="true"全部展开 -->
      <el-tree
        ref="rolePermissionTree"
        v-loading="isLoading"
        :data="permissionList"
        :default-expand-all="true"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :check-strictly="true"
      />
      <template #footer>
        <div style="text-align: right;">
          <el-button @click="closeAssignDialog">取消</el-button>
          <el-button type="primary" @click="subRolePermission">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 获取权限点列表
import { getPermissionListRequest } from '@/api/permission'
import { getRoleDetailRequest } from '@/api/setting'
// 处理树形数据
import { tranListToTreeData } from '@/utils/index'
// 给角色分配权限
import { assignRolePermissionRequest } from '@/api/setting'

export default {
  name: 'AssignPermission',

  props: {
    isShowAssignDialog: {
      type: Boolean,
      default: false
    },
    assignId: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      // 权限点列表数据
      permissionList: [],

      defaultProps: {
        children: 'children',
        label: 'name'
      },

      // 角色权限列表数据（用于回显数据）：
      rolePermissionIdList: [],

      isLoading: false
    }
  },

  methods: {
    // 关闭弹框：
    closeAssignDialog() {
      this.permissionList = []
      this.rolePermissionIdList = []
      this.$emit('update:isShowAssignDialog', false)
    },

    // 一打开弹框后
    openAssignDialog() {
      // this.getPermissionList()
      // this.getRolePermissionList()
      // // 回显数据（由于回显的时候可能会发生角色权限来不及获取，因此使用了Promise.all方法）
      // this.setCheckedKeys()
      this.isLoading = true
      Promise.all([this.getPermissionList(), this.getRolePermissionList()])
      .then(() => {
        this.setCheckedKeys()
        this.isLoading = false
      })
    },

    // 获取权限点列表数据
    async getPermissionList() {
      const { data } = await getPermissionListRequest()
      // 处理为树形数据
      this.permissionList = tranListToTreeData(data, '0')
    },

    // 获取点击的当前角色详细信息：得到权限列表
    async getRolePermissionList() {
      const { data } = await getRoleDetailRequest(this.assignId)
      this.rolePermissionIdList = data.permIds
    },

    // 回显数据：
    setCheckedKeys() {
      this.$refs.rolePermissionTree.setCheckedKeys(this.rolePermissionIdList)
    },

    // 点击提交，分配权限数据
    async subRolePermission() {
      // 获取勾取的权限的id列表
      // console.log(this.$refs.rolePermissionTree.getCheckedKeys())
      // 发起请求，修改数据
      await assignRolePermissionRequest(this.assignId, this.$refs.rolePermissionTree.getCheckedKeys())
      this.closeAssignDialog()
      this.$message.success('权限分配成功')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
